<template>
	<div class="addAplly">
		<div class="form">
			<el-button type="success" @click='add' v-if='!isEdit'>新增</el-button>
			<el-button type="success" @click='edit' v-if='isEdit'>编辑</el-button>
			<el-form ref="formData" :model="formData" :rules="rules" auto-complete="on" label-position="left">
				<div>
					<span class="dialog-name">姓名：</span>
					<el-form-item prop="alipayName">
						<span class="dialog-msg"><el-input v-model="formData.alipayName" placeholder="姓名" :disabled='noInput'></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name">支付宝账号：</span>
					<el-form-item prop="alipayNum">
						<span class="dialog-msg"><el-input v-model="formData.alipayNum" placeholder="支付宝账号" :disabled='noInput'></el-input></span>
					</el-form-item>
				</div>
				<div>
					<span class="dialog-name"><el-button type="warning" @click='send' :disabled='sendDis'>{{sendMsg}}</el-button></span>
					<el-form-item prop="verificationCode">
						<span class="dialog-msg"><el-input v-model="formData.verificationCode" placeholder="验证码" :disabled='noInput'></el-input></span>
					</el-form-item>
				</div>
			</el-form>	
			<el-button type="info" @click='sure' :disabled='noInput'>确定</el-button>
			<el-button type="info" @click='reset' :disabled='noInput'>重置</el-button>
		</div>
	</div>
</template>

<script type="text/javascript">
	import {accountBindingAlipay,accountIsAlipay,uploadSendCode} from "@/api/common"
	import { Message, MessageBox } from 'element-ui'
	export default {
		created(){
			accountIsAlipay().then(res =>{
				if(res.data == false){
					this.isEdit = false;
				}else{
					this.formData = res.data;
					this.isEdit = true;
				}
			}).catch(res =>{
				console.log(res)
			})
		},
		methods: {
			add(data) {
				this.noInput = false;
			},
			edit(data) {
				this.noInput = false;
			},
			sure(data) {
				this.$refs.formData.validate(valid => {
					if(valid){
						accountBindingAlipay(this.formData).then(res =>{
							Message({
						      	message: res.msg,
						      	type: 'success',
						      	duration: 2 * 1000
						   });
						   this.isEdit = true;
						   this.noInput = true;
						}).catch(res =>{
					    	Message({
						      	message: res.msg,
						      	type: 'error',
						      	duration: 2 * 1000
						    })
					    })
					}
				})
			},	
			send(){
				this.sendMsg = 60;
				this.sendDis = true;
				uploadSendCode().then(res =>{
					this.$message.success(res.msg)
				}).catch(res =>{
					this.$message.error(res.msg)
				})
				this.timer = setInterval(()=>{
					this.sendMsg --;
					if(parseInt(this.sendMsg) <= 0){
						clearInterval(this.timer)
						this.sendMsg = '获取验证码';
						this.sendDis = false;
					}
				},1000)
			},
			reset(){
				this.FormData = {
					alipayName: "",
					alipayNum: "",
					verificationCode: ""
				}
			},
		},
		data() {
			return {
				formData:{
					alipayName: "",
					alipayNum: "",
					verificationCode: ""
				},
				isEdit:false,
				noInput:true,
				timer:null,
				sendMsg:'获取验证码',
				sendDis:false,
				rules:{
					alipayName: [{type: 'string',required: true, message: '请输入姓名', trigger: 'blur'}],					
					alipayNum: [{type: 'string',required: true, message: '请输入支付宝账号', trigger: 'blur'}],
					verificationCode: [{type: 'string',required: true, message: '请输入验证码', trigger: 'blur'}]
				},
			}	
		}
	}
</script>

<style scoped>
	.form .el-input {
		width: 120px;
		margin-bottom: 20px;
	}
	
	.form p {
		display: inline-block;
		padding: 0;
		margin: 0;
	}
	
	.dialog-name {
		width: 25%;
		display: inline-block;
	}
	.el-form-item {
		width:73%;
		display: inline-block;
	}
	.form {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		background: #eeeeee;
		padding:20px
	}
	form {
		margin: 50px 0;
	}
	.addAplly {
		
	}
	.el-form-item__error {
		top: 70%;
    	left: 55px;
	}
</style>